import React from 'react'
import '../assets/css/cate.css'
import { NavBar, Icon } from 'antd-mobile';
import { SearchBar, WhiteSpace } from 'antd-mobile';
import { getCate, getGoods } from '../request/api';
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            catelist: [],
            goodslist: [],
        }
    }
    componentDidMount() {
        getCate()
            .then(res => {
                console.log(res, '商品分类');
                if (res.data.code === 200) {
                    this.setState({
                        catelist: res.data.list
                    })
                }
            })
        getGoods(1).then(res => {
            console.log(res, '分类信息');
            if (res.data.code === 200) {
                this.setState({
                    goodslist: res.data.list
                })
            }
        })
    }
    
    change(id) {
        getGoods(id).then(res => {
            console.log(res, '分类信息');
            if (res.data.code === 200) {
                this.setState({
                    goodslist: res.data.list
                })
            }
        })
        
    }
    goDetail(id){
        this.props.history.push('/detail?id='+id)
    }
    render() {
        const { catelist, goodslist } = this.state
        return (<div>
            <div>
                <NavBar
                    className='navbar'
                    icon={<Icon type="left" />}
                    onClick={() =>this.props.history.goBack()}
                >商品分类</NavBar>
            </div>
            <div>
                <SearchBar placeholder="按内容搜索" maxLength={8} />
                <WhiteSpace />
            </div>
            <div className='main'>
                <ul className='main_left'>
                    {
                        catelist.map(item => {
                            return <li onClick={() => this.change(item.id)} className='one' key={item.id}>{item.catename}</li>
                        })
                    }
                </ul>
                <div className='rm'>
                    <p className='p1'>热门精选</p>
                    {
                        goodslist.map(item => {
                            return <div onClick={()=>this.goDetail(item.id)} className='goods' key={item.id}>
                                <div className='left'>
                                    <img src={item.img} alt="" />
                                </div>
                                <div className='right'>
                                    <div className='d1'>
                                        <p>{item.goodsname}</p>
                                        <p>限时</p>
                                    </div>
                                    <div className='d2'>
                                        {item.description}
                                    </div>
                                    <div className='d3'>
                                        <p>￥{item.price}</p>
                                        <p>￥{item.market_price}</p>

                                    </div>
                                    <p className='gog'>加入购物车</p>
                                </div>
                            </div>
                        })
                    }

                </div>
            </div>

        </div>)
    }
}
export default Home